<!--
 * @Author: 傅湘乐 fuxiangle@dhcc.com.cn
 * @Date: 2023-02-16 11:24:44
 * @LastEditors: 傅湘乐 fuxiangle@dhcc.com.cn
 * @LastEditTime: 2023-02-17 10:46:22
 * @FilePath: \sloth-admin-vue3-vite3\src\views\assembly\fileView\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="card">
		<h1>word、ppt、excel、pdf预览组件</h1>
		<div class="fileBox">
			<div v-for="(item, index) in fileList" :key="index" class="item">
				<el-link type="primary" @click="onNodeClick(item)">{{ item.name }}</el-link>
			</div>
		</div>
		<!-- <iframe v-show="viewMimeType == 'office'" frameborder="0" width="100%" height="500" :src="iframeSrc" scrolling="no" /> -->
	</div>
</template>

<script setup lang="ts" name="fileViewer">
import { ref } from 'vue'
const fileList: Array<any> = [
	{
		id: 1,
		name: 'a.docx',
		url: 'http://fe.dhcc.work/aaa/a.docx'
	},
	{
		id: 2,
		name: 'a.pdf',
		url: 'http://fe.dhcc.work/aaa/a.pdf'
	},
	{
		id: 3,
		name: 'a.pptx',
		url: 'http://fe.dhcc.work/aaa/a.pptx'
	},
	{
		id: 4,
		name: 'a.xls',
		url: 'http://fe.dhcc.work/aaa/a.xls'
	}
]
const iframeSrc = ref('')
const onNodeClick = (data: { name: string; url: string }) => {
	const fileName = data.name

	const officeTypeList = ['.doc', '.docx', '.ppt', '.pptx', '.xls', '.xlsx']
	let fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()
	if (officeTypeList.indexOf(fileExtension) !== -1) {
		iframeSrc.value = `https://view.officeapps.live.com/op/view.aspx?src=${data.url}` //使用第三方预览插件
	} else if (fileExtension === '.pdf') {
		//pdf默认使用浏览器的
		iframeSrc.value = data.url
	}
	window.open(iframeSrc.value, '_blank')
}
</script>

<style scoped lang="scss">
.fileBox {
	margin-left: 30px;
	.item {
		margin-bottom: 10px;
	}
}
</style>
